/**
 * 添加乘车人
 * @email 626097912@qq.com
 * Created by dength on 2017/04/13
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    TextInput,
    Alert
} from 'react-native';
import BaseComponent from '../base/baseComponent';
import Constants from '../base/constants';
import CommonStyles from '../base/commonStyles';
import Buttom from '../common/Buttom';
import Icon from 'react-native-vector-icons/Entypo';
import { DatePicker, DataPicker } from 'rnkit-actionsheet-picker';
import { getNavigator } from '../route/route';

class AddUser extends BaseComponent {
    constructor(props) {
        super(props);
        this.state = {
            passengerType: null,     //乘客类型
            IDType: null,            //证件类型
            sex: null,               //性别
            data: null,              //出生日期
            datePickerMode: 'date',
        }
    }

    getNavigationBarProps() {
        return {
            title: '添加乘车人',
            leftButtonImage: require('../images/ic_return.png'),
            hideRightButton: true,
        };
    }

    _onPress(navname) {
        getNavigator().push({ name: navname });
    }

    PTPickerAction() {
        DataPicker.show({
            dataSource: ["儿童票", "成人票", "军残票", "学生票"],
            defaultSelected: ["成人票"],
            numberOfComponents: 1,
            onPickerConfirm: (selectedData, selectedIndex) => {
                console.log(selectedData, selectedIndex);
                this.setState({
                    passengerType: selectedData
                })
            },
            onPickerCancel: () => {
                console.log('data picker canceled');
            },
            onPickerDidSelect: (selectedData, selectedIndex) => {
                console.log(selectedData, selectedIndex);
            }
        })
    }

    IDPickerAction() {
        DataPicker.show({
            dataSource: ["港澳通行证", "二代身份证", "护照", "台湾通行证"],
            defaultSelected: ["二代身份证"],
            numberOfComponents: 1,
            onPickerConfirm: (selectedData, selectedIndex) => {
                console.log(selectedData, selectedIndex);
                this.setState({
                    IDType: selectedData
                })
            },
            onPickerCancel: () => {
                console.log('data picker canceled');
            },
            onPickerDidSelect: (selectedData, selectedIndex) => {
                console.log(selectedData, selectedIndex);
            }
        })
    }

    datePickerAction() {
        DatePicker.show({
            yearText: '年',
            monthText: '月',
            dayText: '号',
            titleText: '', //中间文字
            // hourText: 'H',
            // minutesText: 'M',
            datePickerMode: this.state.datePickerMode,
            onPickerConfirm: (selectedDate) => {
                console.log(selectedDate);
                this.setState({
                    data: selectedDate
                })
            },
            onPickerCancel: () => {
                console.log('data picker canceled');
            },
            onPickerDidSelect: (selectedDate) => {
                console.log(selectedDate);
            }
        })
    }

    sexPickerAction() {
        DataPicker.show({
            dataSource: ["男", "女"],
            defaultSelected: ["男"],
            numberOfComponents: 1,
            onPickerConfirm: (selectedData, selectedIndex) => {
                console.log(selectedData, selectedIndex);
                this.setState({
                    sex: selectedData
                })
            },
            onPickerCancel: () => {
                console.log('data picker canceled');
            },
            onPickerDidSelect: (selectedData, selectedIndex) => {
                console.log(selectedData, selectedIndex);
            }
        })
    }

    renderBody() {
        let {ticketType} = this.state;
        return (
            <View style={styles.container}>
                <View style={styles.waiceng_box}>
                    <View style={styles.xin_border}>
                        <View style={[styles.jiu_box, styles.zceng_box]}>
                            <View style={{ width: 70 }}>
                                <Text style={styles.xin_box_color}>姓名</Text>
                            </View>
                            <TextInput
                                style={styles.box_input}
                                placeholder="请输入乘车人姓名"
                                placeholderTextColor="#B1B9C1"
                                underlineColorAndroid="transparent"
                                numberOfLines={1}
                                //value={addressTrueName}
                                //onChangeText={(value) => { this.setState({ addressTrueName: value }) } }
                                />
                        </View>
                    </View>
                    <View style={styles.xin_border}>
                        <View style={[styles.xin_box, styles.zceng_box]}>
                            <Text style={styles.xin_box_color}>乘客类型</Text>
                            <TouchableOpacity
                                activeOpacity={0.6}
                                onPress={() => { this.PTPickerAction() } }
                                style={styles.Total}>
                                <Text style={{ color: '#FF8B00' }}>
                                    {this.state.passengerType === null ? '成人票' : this.state.passengerType}
                                </Text>
                                <Icon name="chevron-thin-right" size={18} color="#BDC4CA" />

                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={styles.xin_border}>
                        <View style={[styles.xin_box, styles.zceng_box]}>
                            <Text style={styles.xin_box_color}>证件类型</Text>
                            <TouchableOpacity
                                activeOpacity={0.6}
                                onPress={() => { this.IDPickerAction() } }
                                style={styles.Total}>
                                <Text style={{ color: '#FF8B00' }}>
                                    {this.state.IDType === null ? '二代身份证' : this.state.IDType}
                                </Text>
                                <Icon name="chevron-thin-right" size={18} color="#BDC4CA" />

                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={styles.xin_border}>
                        <View style={[styles.jiu_box, styles.zceng_box]}>
                            <View style={{ width: 70 }}>
                                <Text style={styles.xin_box_color}>证件号码</Text>
                            </View>
                            <TextInput
                                style={styles.box_input}
                                placeholder="请输入证件号码"
                                placeholderTextColor="#B1B9C1"
                                underlineColorAndroid="transparent"
                                numberOfLines={1}
                                //value={addressMobile}
                                //onChangeText={(value) => { this.setState({ addressMobile: value }) } }
                                />
                        </View>
                    </View>

                    {this.state.IDType === null || this.state.IDType == '二代身份证' ?
                        <View />
                        :
                        <View>
                            <View style={styles.xin_border}>
                                <View style={[styles.xin_box, styles.zceng_box]}>
                                    <Text style={styles.xin_box_color}>出生日期</Text>
                                    <TouchableOpacity
                                        onPress={() => { this.datePickerAction() } }
                                        activeOpacity={0.6}
                                        style={styles.Total}>
                                        <Text style={{ color: '#FF8B00' }}>
                                            {this.state.data === null ? '请选择出生日期' : this.state.data}
                                        </Text>
                                        <Icon name="chevron-thin-right" size={18} color="#BDC4CA" />
                                    </TouchableOpacity>
                                </View>
                            </View>
                            <View style={styles.xin_border}>
                                <View style={[styles.xin_box, styles.zceng_box]}>
                                    <Text style={styles.xin_box_color}>性别</Text>
                                    <TouchableOpacity
                                        onPress={() => { this.sexPickerAction() } }
                                        activeOpacity={0.6}
                                        style={styles.Total}>
                                        <Text style={{ color: '#FF8B00' }}>
                                            {this.state.sex === null ? '请选择性别' : this.state.sex}
                                        </Text>
                                        <Icon name="chevron-thin-right" size={18} color="#BDC4CA" />
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    }


                </View>
                {
                    this.state.IDType === null || this.state.IDType == '二代身份证' ?
                        <View style={[styles.zceng_box, { marginTop: 5 }]}>
                            <Text style={{ color: '#FF8B00', fontSize: 12 }}>
                                *儿童票必须儿童身高在1.2米-1.5米之间
                        </Text>
                        </View>
                        :
                        <View />
                }

                <View style={styles.binding_buttom}>
                    <Buttom
                        onPress={() => this._onPress('SelectUser')}
                        containerStyle={styles.buttom_box}
                        style={{ fontSize: 18, color: 'white' }}
                        text={'确定'}
                        />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: CommonStyles.colors.background,
    },
    waiceng_box: {
        backgroundColor: '#fff', marginTop: 6,
    },
    zceng_box: {
        marginLeft: 15,
        marginRight: 15,
        width: Constants.window.width - 30,
    },
    xin_border: {
        borderBottomColor: '#C8C7CC',
        borderBottomWidth: 0.5, height: 55, justifyContent: 'center'
    },
    xin_box: {
        flexDirection: 'row', alignItems: 'center',
        justifyContent: 'space-between',
    },
    jiu_box: {
        flexDirection: 'row', alignItems: 'center',
        justifyContent: 'space-between'
    },
    xin_box_color: { color: '#555555' },
    Total: {
        flexDirection: 'row', alignItems: 'center'
    },
    box_input: {
        fontSize: 14, textAlign: 'right',
        textAlignVertical: 'center', flex: 1, color: '#000', height: 40
    },
    //按钮样式
    binding_buttom: {
        width: Constants.window.width, marginLeft: 30, marginRight: 30, marginTop: 20
    },
    buttom_box: {
        height: 47, backgroundColor: '#FF8B00', alignItems: 'center', justifyContent: 'center', width: Constants.window.width - 60, borderRadius: 10
    },
});

export default AddUser;